<template>
  <view class="content" style="background-color: rgb(245, 245, 245)">
    <view style="height: 64px; position: fixed; top: 0; z-index: 100" :class="'w-100 bg-' + color">
    </view>
    <view style="padding-bottom: 80rpx; margin-top: 64px" class="p-2" :class="'bg-' + color">
      <view v-if="token == ''" class="bg-white flex justify-between align-center py-4 p-2" style="border-radius: 20rpx">
        <view style="display: flex; align-items: center;">
          <image style="width: 80rpx; height: 80rpx; border-radius: 50%"
            src="https://digital.essc.top/dist/zjl_icon/user.png" mode="">
          </image>
          <text style="display: inline-block;" class="ml-2">请登录</text>
        </view>
        <view @click="goLogin" class="">
          <button class="font-sm" style="
              width: 200rpx;
              border-radius: 30rpx;
              height: 60rpx;
              border: 1rpx solid #ccc;
              line-height: 60rpx;
            ">
            登录
          </button>
        </view>
      </view>
      <view v-else class="bg-white flex justify-between align-center py-4 p-2" style="border-radius: 20rpx">
        <view class="flex align-center">
          <image class="mr-2" style="width: 100rpx; height: 80rpx; border-radius: 50%"
            src="https://digital.essc.top/dist/zjl_icon/user.png" mode=""></image>
          <view class="w-100 font-sm flex flex-column">
            <view class="text-ellipsis" style="width: 300rpx">
              <text class="font-weight-bold font-md">{{ useName }}({{ usePhone.substring(7) }})</text>
            </view>
          </view>
        </view>
        <view @click="OutLogin" class="">
          <button class="font-sm" style="
              width: 200rpx;
              border-radius: 30rpx;
              height: 60rpx;
              border: 1rpx solid #ccc;
              line-height: 60rpx;
            ">
            退出登录
          </button>
        </view>
      </view>
    </view>
    <!-- 我的订单 -->
    <view class="bg-white flex-column flex mx-2 justify-between align-center p-2"
      style="border-radius: 20rpx; transform: translateY(-65rpx)">
      <view class="px-2 flex align-center justify-between w-100">
        <text class="font-lg font-weight-bold">我的订单</text>
        <view class="flex text-muted align-center" @click="Go('/pages/My/My_Order/My_Order?index=' + 0)">
          <text>全部订单</text>
          <uni-icons color="#828d96" size="18" type="right"></uni-icons>
        </view>
      </view>
      <view v-if="token != ''" class="flex w-100 mt-2" style="justify-content: space-around">
        <view v-for="(item, i) in FiveData" :key="i" class="flex align-center flex-column"
          @click="Go('/pages/My/My_Order/My_Order?index=' + item.index)">
          <image style="width: 100rpx; height: 100rpx" :src="Domain_ICON + item.pic" mode=""></image>
          <text>{{ item.title }}</text>
        </view>
      </view>
    </view>
    <view v-if="token != ''" class="bg-white flex-column flex m-2 justify-between align-center p-2"
      style="border-radius: 20rpx; transform: translateY(-65rpx)">
      <view class="px-2 flex align-center justify-between w-100">
        <text class="font-lg font-weight-bold">我的采购询价</text>
        <view class="flex text-muted align-center" @click="Go('/pages/My/My_Order/My_procurement_inquiry?index =' + 0)">
          <text>全部采购询价</text>
          <uni-icons color="#828d96" size="18" type="right"></uni-icons>
        </view>
      </view>
      <view class="flex w-100 mt-4" style="justify-content: space-around">
        <view style="position: relative" v-for="(item, i) in ThreeData" :key="i" class="flex align-center flex-column"
          @click="
            Go('/pages/My/My_Order/My_procurement_inquiry?index=' + item.index)
            ">
          <image style="width: 100rpx; height: 100rpx" :src="Domain_ICON + item.pic" mode=""></image>
          <text>{{ item.title }}</text>
        </view>
      </view>
    </view>
    <view class="bg-white px-2 flex-column flex mx-2" style="transform: translateY(-65rpx)"
      :style="token == '' ? '' : radius">
      <view style="box-sizing: border-box" class="w-100 px-1 mt-3">
        <view @click="goFour(item.url)" v-for="(item, i) in ForData" :key="i" class="flex justify-between w-100 mb-3">
          <view class="flex font-sm align-center">
            <uni-icons class="mr-1" :type="item.icon"></uni-icons>
            <text>{{ item.title }}</text>
          </view>
          <uni-icons size="18" style="color: #ccc" type="right"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 推荐 -->
    <view class="font-weight-bold font-lg flex align-center justify-center" style="">
      <image src="https://digital.essc.top/dist/zjl_icon/wntj.png" style="width: 40rpx" class="" mode="widthFix"></image>
      <text>为你推荐</text>
    </view>
    <!-- 推荐列表 -->
    <view class="w-100">
      <Goods></Goods>
    </view>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      Domain_ICON: app.globalData.Domain_ICON,
      color: uni.getStorageSync("ThemeColors")
        ? uni.getStorageSync("ThemeColors")
        : "green",
      useName: "",
      usePhone: "",
      radius: "border-radius:20rpx",
      token: "",
      FourData: [
        {
          title: "商品收藏",
          icon: "star",
        },
        {
          title: "店铺关注",
          icon: "shop",
        },
        {
          title: "购物车",
          icon: "cart",
        },
      ],
      FiveData: [
        {
          title: "待审核",
          pic: "/SH.png",
          url: "/pages/My/Payment",
          index: 1,
        },
        {
          title: "待付款",
          pic: "/FK.png",
          url: "/pages/Trade/Trade",
          index: 2,
        },
        {
          title: "待收货",
          pic: "/SOHUO.png",
          url: "/pages/Trade/Trade",
          index: 3,
        },
        {
          title: "交易成功",
          pic: "/SOUHOU.png",
          url: "/pages/Trade/Trade",
          index: 4,
        },
      ],
      ThreeData: [
        {
          title: "待审核",
          pic: "/SH.png",
          url: "/pages/My/Payment",
          index: 1,
        },
        {
          title: "待付款",
          pic: "/FK.png",
          url: "/pages/Trade/Trade",
          index: 2,
        },
        {
          title: "待收货",
          pic: "/SOHUO.png",
          url: "/pages/Trade/Trade",
          index: 3,
        },
        {
          title: "交易成功",
          pic: "/SOUHOU.png",
          url: "/pages/Trade/Trade",
          index: 4,
        },
      ],
      ForData: [
        {
          title: "我的采购",
          icon: "bars",
          url: "/pages/My/My_Order/My_procurement",
        },
        {
          title: "我的供应",
          icon: "wallet",
          url: "/pages/My/My_Order/My_Supply",
        },
        {
          title: '认证服务',
          icon: 'scan',
          url: '/pages/My/Certificate_services',
        },
        {
          title: "浏览记录",
          icon: "vip",
          url: "/pages/My/BrowsingHistory",
        },
        // {
        //   title: "我的收货地址",
        //   icon: "location",
        //   url: "",
        // },
        {
          title: "修改密码",
          icon: "locked",
          url: "/pages/My/My_Order/Change_password",
        },
        {
          title: "消息列表",
          icon: "chat",
          url: "/pages/My/My_Order/Message",
        },
        {
          title: "订单融资",
          icon: "shop",
          url: "/pages/My/My_Order/Order_financing",
        },
        {
          title: "关于我们",
          icon: "staff",
          url: "/pages/My/Aboutus",
        },
      ],
    };
  },
  onShow() {
    if (uni.getStorageSync("use") != void 0) {
      this.usePhone = uni.getStorageSync("use");
    }
    if (uni.getStorageSync("username") != void 0) {
      this.useName = uni.getStorageSync("username");
    }
    if (uni.getStorageSync("token") != void 0) {
      this.token = uni.getStorageSync("token");
    }
  },
  beforeCreate() {
    if (uni.getStorageSync("use") != void 0) {
      this.usePhone = uni.getStorageSync("use");
    }
    if (uni.getStorageSync("username") != void 0) {
      this.useName = uni.getStorageSync("username");
    }
    if (uni.getStorageSync("token") != void 0) {
      this.token = uni.getStorageSync("token");
    }
  },
  onLoad(e) {
    if (uni.getStorageSync("username") != void 0) {
      this.useName = uni.getStorageSync("username");
    }
    if (uni.getStorageSync("token") != void 0) {
      this.token = uni.getStorageSync("token");
    }
  },
  methods: {
    Go(url) {
      if (url == "") {
        uni.showToast({
          title: "暂未开放",
          icon: "none",
        });
        return;
      }
      if (url == "/pages/My/Set" || url == "/pages/My/User") {
        uni.navigateTo({
          url,
        });
        return;
      }
      uni.navigateTo({
        url,
      });
    },
    goLogin() {
      //去登录
      uni.navigateTo({
        url: "/pages/My/Login",
      });
    },
    OutLogin() {
      //退出登录
      this.token = "";
      uni.removeStorageSync("token");
      uni.removeStorageSync("use");
      uni.removeStorageSync("username");
    },
    goFour(url) {
      if (this.token == "") {
        this.goLogin();
      }
      else if (url == "") {
        uni.showToast({
          title: "暂未开放",
          icon: "none",
        });
      } else {
        uni.navigateTo({
          url,
        });
      }
    },
    goUser() {
      uni.navigateTo({
        url: "/pages/My/User",
      });
    },
  },
};
</script>

<style lang="scss">
.my-search-container {
  height: 50px;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.my-search-boc {
  height: 36px;
  border: 1px solid green;
  background-color: white;
  border-radius: 18px;
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>